<template>
  <nav
    class="navbar navbar-expand-lg navbar-dark"
    :class="{ isBgc: isBgc }"
    :style="{
      background: bgc,
    }"
  >
    <div class="container-fluid">
      <div class="container" id="container">
        <router-link class="navbar-brand" to="/home">
          <img src="~@/assets/img/home/Investment_management.png" alt="" />
        </router-link>
        <div class="search" v-if="token">
          <el-icon @click="handleSearchBtn"><search /></el-icon>
          <el-input
            class="search-input"
            placeholder="Search by porject name"
            v-model="searchValue"
          ></el-input>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapsibleNavbar"
          aria-expanded="false"
        >
          <img src="~@/assets/img/home/menu.png" />
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <router-link class="nav-link" to="/home">Home</router-link>
            </li>
            <li class="nav-item" v-if="token">
              <router-link class="nav-link" to="/protfolio">
                Protfolio
              </router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/about">About Us</router-link>
            </li>
            <li class="nav-item btn-item" v-if="!token">
              <router-link class="nav-link" to="/login">
                <button class="login-btn">
                  Sign in
                  <img src="~@/assets/img/home/sign_in_icon.svg" alt="" />
                </button>
              </router-link>
            </li>
            <li class="nav-item" v-if="token">
              <!-- <router-link class="nav-link" to="/about">About Us</router-link> -->
              <router-link class="nav-link profile" to="/user">
                <el-avatar
                  class="profile-img"
                  :size="64"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                />
                <span class="profile-text">My Home Page</span>
              </router-link>
            </li>
            <li class="nav-item" v-if="token">
              <el-button type="text" @click="handlelogOutBtn">
                Log Out
              </el-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from '@/store'
import router from '@/router'

import localCache from '@/utils/cache'

withDefaults(
  defineProps<{
    name?: string
    isBgc?: boolean
    bgc?: string
  }>(),
  {
    name: '',
    isBgc: false,
    bgc: '',
  }
)
const store = useStore()

const searchValue = ref('')

const token = !!localCache.getCache('token')
const handlelogOutBtn = () => {
  localCache.deleteCache('token')
  router.go(0)
}

const handleSearchBtn = () => {
  store.dispatch('user/getProjectListAction', {
    queryInfo: {
      offset: 1,
      size: 1000,
      name: searchValue.value,
    },
  })
  router.push('/user/project-management')
}
</script>
<style scoped lang="less">
.navbar.isBgc {
  background: linear-gradient(210deg, #342e38 0%, #1c1c24 48%, #0c1017 100%);
  position: relative;
  border-bottom: 1px rgba(112, 112, 112, 0.28) solid;
}
.navbar {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  z-index: 999;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between !important;

    .navbar-brand > img {
      width: 100%;
      height: 100%;
    }
    .navbar-collapse {
      flex-grow: 0;
    }
    .search {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      align-items: center;
      color: rgba(255, 255, 255, 0.5);
      font-size: 20px;
      font-weight: 800;
      .search-input {
        visibility: hidden;
        transition: all 1s;
        opacity: 0;
        order: 1;
        width: 375px;
        :deep(.el-input__inner) {
          background-color: transparent;
          box-shadow: none;
          color: #fff;
          border-bottom: 1px #3a3a3a solid;
        }
      }
      i {
        color: #fff;
        opacity: 0.5;
        order: 2;
        cursor: pointer;
        padding-right: 40px;
        padding-left: 10px;
        box-sizing: content-box;
      }

      i:hover + .search-input {
        visibility: visible;
        opacity: 1;
      }
      .search-input:hover {
        visibility: visible;
        opacity: 1;
      }
    }

    .navbar-nav {
      align-items: center;

      .nav-item {
        margin-right: 26px;
        font-size: 22px;
        font-family: SF Pro Display;
        font-weight: 400;

        .nav-link {
          white-space: nowrap;
          color: #fff;
          opacity: 0.5;
        }

        .router-link-active {
          font-weight: 600;
          color: #fff !important;
          opacity: 1;
        }
        .login-btn {
          width: 169px;
          height: 64px;
          border-radius: 100px;
          background-color: #3772ff;
          border: none;
          color: #fff;
        }
        .profile {
          opacity: 1;

          .profile-img {
            display: block;
          }

          .profile-text {
            display: none;
          }
        }
      }
      .btn-item {
        .nav-link {
          opacity: 1;
        }
      }
    }
  }
  :deep(.el-button--text) {
    display: none;
  }
}

@media screen and(max-width: 980px) {
  .navbar.navbar-dark {
    position: relative;
    background: #0e0e12;
    .navbar-toggler {
      &:focus {
        box-shadow: none;
      }
    }
    .container {
      flex-wrap: wrap;

      .search {
        .search-input {
          width: auto;
        }
      }
    }
    .navbar-brand > img {
      width: 119px !important;
      height: 51px !important;
    }
    .navbar-nav {
      align-items: flex-start !important;
    }
    .navbar-nav .nav-item .nav-link .login-btn {
      font-size: 22px;
      font-family: SF Pro Display;
      font-weight: 400;
      width: auto;
      height: auto;
      background-color: transparent;
      img {
        display: none;
      }
    }
    .navbar-nav .nav-item .nav-link {
      opacity: 1 !important;
    }
    .container .navbar-nav .nav-item {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 13px;
      font-size: 18px;
      font-family: SF Pro Display;
      font-weight: 400;
      border-bottom: 1px solid rgb(112, 112, 112, 0.1);
      .profile {
        .profile-img {
          display: none;
        }
        .profile-text {
          display: block;
        }
      }

      .login-btn {
        font-size: 18px;
      }
    }

    .container .navbar-nav .nav-item:last-child {
      border: none;
      padding: 8px 0 13px;
      :deep(.el-button--text) {
        display: block;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>
